<template>
  <div class="container">
    <div class="mint-search">
      <div class="mint-searchbar">
        <div class="mint-searchbar-label">项目名称</div>
        <div class="mint-searchbar-inner">
          <i class="mintui mintui-search"></i>
          <input type="search" placeholder="搜索" v-model="projectName" class="mint-searchbar-core" @blur="searchProject">
        </div>
        <router-link :to="{name:'project'}" class="mint-searchbar-cancel">取消</router-link>
      </div>
      <div id="wrapper" ref="scrollWrap">
        <div class="scroller" ref="scroller">
          <ul ref="scrollList" v-if="projectList.length > 0">
            <router-link tag="li" v-for="project in projectList" :key="project.id" :to="{name: 'projectDetail', params:{projectId: project.id}}">
              <project-list-item :project="project"></project-list-item>
            </router-link>
          </ul>
          <empty-list v-else></empty-list>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  import { Indicator } from 'mint-ui';
  import {getStyle,getDeviceRatio} from '../../base/js/util.js'
  import {api} from "../../base/js/api.js"
  import fetch from '../../utils/fetch'
  import ProjectListItem from './ProjectListItem.vue'
  import EmptyList from '../Empty-List'
  /*获取当前缩放比*/
  const DEVICE_RATIO=getDeviceRatio();


  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   * @param stop 下拉刷新后回滚
   */

  /*下拉配置*/
  const DOWN_CONFIG={
    threshold:20*DEVICE_RATIO,
    stop:20*DEVICE_RATIO
  }
  /*上拉配置*/
  const UP_CONFIG={
    threshold:-20*DEVICE_RATIO,
  }
  export default{
    data () {
      return {
        projectList:[],
        projectName:''
      }
    },
    components:{
      EmptyList,
      ProjectListItem
    },
    mounted(){
      const {scroller, scrollWrap, scrollList} = this.$refs;
      this.scroller = new BScroll(scrollWrap, {
        click: true,
        probeType: 3,
        pullDownRefresh: DOWN_CONFIG,
        pullUpLoad: UP_CONFIG
      });
    },
    methods:{
      searchProject(){
        Indicator.open()
        fetch('/api/project/search?name='+ this.projectName).then(response =>{
          if(response.data.success) {
            this.projectList = response.data.obj
          }
          Indicator.close()
        })
      }
    },
    deactivated () {
      this.$destroy()
    }
  }
</script>
<style scoped lang="scss">
  .container{
    .mint-search {
      .mint-searchbar{
        .mint-searchbar-label{
          display: inline-block;
          min-width: 60px;
          border:1px solid #D0D0D0;
          padding: 4px 6px;
          height: 28px;
          margin-right: 10px;

        }
      }
    }
  }
  #wrapper {
    position: fixed;
    top: 50px;
    bottom: 3px;
    width: 100%;
    overflow: hidden;
    background: #F0EFF5;
    z-index: 1;
    .scroller {
      position: absolute;
      width: 100%;
      &.topPadding {
        top: 1rem;
      }

    }
  }
</style>
